.nav-bg {
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  z-index: 999;
  width: 100vw;
  height: 6vh;
  min-height: .47rem;
  display: flex;
  justify-content: center;
  box-shadow: 0 .01rem .05rem rgba(0, 0, 0, 0.1);
}

.nav-bg .icon-more {
  position: absolute;
  left: .1rem;
  font-size: .25rem;
  color: rgba(102, 107, 122, 1);
}

.nav-page {
  padding: .1rem 0;
  position: fixed;
  background: #fff;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  z-index: 99999;
  top: 0;
  left: -100vw;
  transition: left 0.5s ease-in-out;
  overscroll-behavior: none;
}

.nav-page-show {
  left: 0;
}

.nav-page .icon-cancel {
  background: rgba(233, 236, 242, 1);
  border-radius: 50%;
  padding: .05rem;
}

.nav-page .nav-item {
  padding-top: .1rem;
  padding-bottom: .05rem;
  border-bottom: .01rem solid rgba(176, 187, 207, 1);
}

.nav-page .nav-item .nav-text {
  color: rgba(36, 38, 43, 1);
  font-size: .16rem;
  font-weight: 400;
}

.nav-page .telephone-number {
  margin-top: .4rem;
  color: rgba(36, 38, 43, 1);
  font-size: .16rem;
  font-weight: 400;
}

.nav-page .telephone-number .icon-dianhua {
  margin-right: .05rem;
  color: var(--main-color);
  font-size: .2rem;
}

.page-banner img {
  width: 100vw;
  display: block;
  margin-bottom: .1rem;
}


.nav-text .nav-zh {
  font-size: .18rem;
  font-weight: 700;
  color: rgba(36, 38, 43, 1);
  font-family: 'HanSans-song';
}

.nav-text .nav-en {
  font-size: .14rem;
  font-weight: 700;
  color: var(--main-color-light);
  font-family: 'HanSans-song';
}

.page-nav {
  margin-bottom: .2rem;

}

.page-nav-list {
  margin-bottom: .2rem;
  width: 100%;
  flex-wrap: wrap !important;
}

.page-nav-item {
  text-align: center;
  height: .44rem;
  background: var(--main-color-lighter);
}

@media screen and (min-width: 768px) {
  .page-nav-item {
    flex: 0 0 20%;
  }
  .page-nav-item {
    &:nth-last-child(2):first-child,
    &:nth-last-child(2):first-child ~ & {
      flex: 1 !important;
    }
    &:nth-last-child(3):first-child,
    &:nth-last-child(3):first-child ~ &{
      flex: 1 !important;
    }
    &:nth-last-child(4):first-child,
    &:nth-last-child(4):first-child ~ &{
      flex: 1 !important;
    }
    &:nth-last-child(5):first-child,
    &:nth-last-child(5):first-child ~ &{
      flex: 1 !important;
    }
  }
}

@media screen and (min-width: 410px) {
  .page-nav-item {
    flex: 0 0 25%;
  }
  .page-nav-item {
    &:nth-last-child(2):first-child,
    &:nth-last-child(2):first-child ~ & {
      flex: 1 !important;
    }
    &:nth-last-child(3):first-child,
    &:nth-last-child(3):first-child ~ &{
      flex: 1 !important;
    }
    &:nth-last-child(4):first-child,
    &:nth-last-child(4):first-child ~ &{
      flex: 1 !important;
    }
  }
}

@media screen and (max-width: 410px) {
  .page-nav-item {
    flex: 0 0 33.333%;
  }
  .page-nav-item {
    &:nth-last-child(2):first-child,
    &:nth-last-child(2):first-child ~ & {
      flex: 1 !important;
    }
    &:nth-last-child(3):first-child,
    &:nth-last-child(3):first-child ~ &{
      flex: 1 !important;
    }
  }
}


.current-navi {
  color: #ffffff;
  background: var(--main-color);
}